<template>
	<div class="cpfilm">
		<ul v-if="lists.length>0">
			<li v-for="(v,i) in lists" :key="i">
				<!-- 左边 时间+场地 -->
				<div class="cpli-left">
					<!-- 时间 -->
					<div class="cpl-date">
						<div class="top" >
							{{dateHMFormat(v.showAt)}}
						</div>
						<div class="botton" >
							{{dateHMFormat(v.endAt)}}散场
						</div>
					</div>
					<!-- 场地 -->
					<div class="cpl-date cpl-cd">
						<div class="top">
							{{v.filmLanguage}}{{v.imagery}}
						</div>
						<div class="botton">
							{{v.hallName}}
						</div>
					</div>
				</div>
				<!-- 右边 价格+购票 -->
				<div class="cpli-right">
					<!-- 价格 -->
					<div class="price">
						<span>￥</span>{{v.salePrice/100}}起
					</div>
					<!-- 购票 -->
					<div class="btns">
						<van-button plain type="primary" color="#ff5f16" size='mini' class='btn'>购票</van-button>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	//导入时间库
	import timeFormats from '@/utility/formatTime'
	export default{
		data(){
			return{
				lists:[]
			}
		},
		mounted() {
			/* 获取路由传递的值 */
			let id = this.$route.params.id; //影院id
			let filmId = this.$route.params.filmId; //电影id
			let date = this.$route.params.date; //时间
			// 获取排片数据
			this.$axios.get('/playSchedule',{params:{
				cinemaId:id,
				filmId :filmId,
				date : date
			}}).then(res=>{
				// 判断数据
				if(!res){
					return;
				}
				// 将排片数据赋值
				this.lists = res.schedules;
			})
		},
		methods:{
			/* 解构 --前提名称要与抛出的一致 */
			...timeFormats,
		},
		watch:{
			// 监听路由变化后,重新获取参数,重新获取数据
			"$route":function(){
				/* 获取路由传递的值 */
				let id = this.$route.params.id; //影院id
				let filmId = this.$route.params.filmId; //电影id
				let date = this.$route.params.date; //时间
				// 获取排片数据
				this.$axios.get('/playSchedule',{params:{
					cinemaId:id,
					filmId :filmId,
					date : date
				}}).then(res=>{
					// 判断数据
					if(!res){
						return;
					}
					// 将排片数据赋值
					this.lists = res.schedules;
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.cpfilm {
		ul {
			li {
				padding: 15px 15px;
				display: flex;
				justify-content: space-between;

				/* 左边 时间+场地 */
				.cpli-left {
					display: flex;

					/* 时间 */
					.cpl-date {
						text-align: left;

						.top {
							font-size: 15px;
							color: #191a1b;
						}

						.botton {
							font-size: 13px;
							color: #797d82;
							margin-top: 2px;
						}
					}

					/* 场地 */
					.cpl-cd {
						margin-left: 20px;
					}
				}

				/* 右边 价格+购票  */
				.cpli-right {
					display: flex;
					align-items: center;
					/* 价格 */
					.price {
						box-sizing: border-box;
						padding-right: 20px;
						font-size: 15px;
						color: #ff5f16;

						span {
							font-size: 12px;
						}
					}

					/* 按键 */
					.btns {
						width: 50px;
						.btn {
							padding: 1px 8px;
						}
					}
				}
			}
		}
	}
</style>
